<template>
    <div>
        <v-dialog
            title="应付调整"
            :show.sync="dialogVisible"
            :destroy-on-close="true"
            @beforeClose="beforeClose"
            width="1200px"
        >
            <el-row style="text-align: right">
                <el-button type="primary" size="small" @click="print">导出</el-button>
            </el-row>
            <div id="printAccountsTemplate">
                <el-row  style="font-size: 24px;text-align: center;padding-top: 15px">
                    福田物管中心租赁社会物业支付明细表
                </el-row>
                <el-row style="margin-left: 30px;padding-top: 30px;font-size: 18px">
                    单位名称：福田区物业管理中心
                </el-row>
                <div class="table-div">
                    <table class="table">
                        <tbody>
                        <tr>
                            <th rowspan="11">物业租金支付明细</th>
                            <th>对方单位名称</th>
                            <td colspan="5">福田区物业管理中心</td>
                        </tr>
                        <tr>
                            <th>面积(m²)</th>
                            <td colspan="5">{{data.rentContract.buildingArea}}</td>
                        </tr>
                        <!--<tr>
                            <th>单价(元/m²/月)</th>
                            <td colspan="5">{{data.rentContract.rentAmount}}</td>
                        </tr>-->
                        <tr>
                            <th>本次应付租金(元)</th>
                            <td colspan="2">{{data.rentContract.rentAmount}}</td>
                            <th align="center">应付调整(元)</th>
                            <td colspan="2">
                                <el-input v-model="form.remarks" type="textarea" placeholder="请输入"></el-input>
                            </td>
                        </tr>
                        <tr>
                            <th>合同期限</th>
                            <td colspan="5">{{data.rentContract.startDate}}至{{data.rentContract.endDate}}</td>
                        </tr>
                        <tr>
                            <th>合同总租金(元)</th>
                            <td colspan="5">{{data.accumulatedAmountReceivedCount}}</td>
                        </tr>
                        <tr>
                            <th>合同累计已付金额(元)</th>
                            <td colspan="5">{{data.accumulatedAmountReceived}}</td>
                        </tr>
                        <tr>
                            <th>本次申请付款金额(元)</th>
                            <td colspan="5">{{data.amountOfReceivables}}</td>
                        </tr>
                        <tr>
                            <th>本次申请付款金额期间</th>
                            <td colspan="5">{{data.consolidatedCollectionFeeCycle[0]}}</td>
                        </tr>
                        <tr>
                            <th>合同租金余款(元)</th>
                            <td colspan="5">{{data.accumulatedAmountReceivedCount-data.accumulatedAmountReceived}}</td>
                        </tr>
                        <tr>
                            <th>制表人</th>
                            <td colspan="2">{{form.createName}}</td>
                            <th align="center">时间</th>
                            <td colspan="2">{{form.createTime}}</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-box" style="text-align: right"><el-button type="primary" size="small" @click="dialogVisible=false">关闭</el-button></div>
        </v-dialog>
    </div>
</template>

<script>
    import printJS from 'print-js'
    import {getConsolidatedCollection} from '../../api/finance-collection-actual'
    export default {
        name: "edit-accounts",
        data(){
            return{
                form:{},
                data:{
                    rentContract:{
                    },
                    consolidatedCollectionFeeCycle:[]
                },
                nowTime: new Date(),
                dialogVisible:false
            }
        },
        methods:{
            show(item){
                this.dialogVisible=true
                this.form=item
                getConsolidatedCollection(this.form.rentContractId,this.form.receivableId).then(resp => {
                    this.data = resp.data.data;
                })
            },
            print(){
                printJS({
                    printable: 'printAccountsTemplate',
                    type: 'html',
                    //properties: [
                    //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                    //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                    //],
                    // header: `<p class="custom-p"> 名单 </p>`,
                    maxWidth:1000,
                    style: '.no-print{width: 0px} @page{size: auto A2 portrait;margin: 3mm;} @media print {' +
                        '.card-box {margin-left: -80px;width: 100%;margin-bottom: 14mm;border-bottom: 0;}' +
                        '.data-info{} ' +
                        '} ',
                    gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                    gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                    repeatTableHeader: true,
                    scanStyles:true,
                    targetStyles: ['*'],
                    ignoreElements:['no-print']
                })
            },
            beforeClose(done) {
                done()
            }

        },
    }
</script>

<style lang="scss" scoped>

    table{
        border: solid #bfbfbf 1px;
        border-collapse: collapse;
        padding: 10px 20px;
        max-width: 100%;
    }
    th{
        border: solid #bfbfbf 1px;
    }
    tr{
        height: 50px;
    }
    td{
        border: solid #bfbfbf 1px;
        padding: 10px 20px;
    }
    .table{
        align-content: center;
        vertical-align: center;
        text-align: center;
    }
    .table-div{
        width: 96%;
        align-content: center;
        margin: 30px auto;
    }
    
    @include info-list(3);
    @include formWrap(3);
</style>
